<!DOCTYPE HTML>
<html>
<head>
  <style>
    .hour {
      color: red
    }

    .min {
      color: green
    }

    .sec {
      color: blue
    }
  </style>
</head>

<body>

  <div id="clock">
    <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
  </div>

  <script>
    let timerId;

    function update() {
      let clock = document.getElementById('clock');
      let date = new Date();

      let hours = date.getHours();
      if (hours < 10) hours = '0' + hours;
      clock.children[0].innerHTML = hours;

      let minutes = date.getMinutes();
      if (minutes < 10) minutes = '0' + minutes;
      clock.children[1].innerHTML = minutes;

      let seconds = date.getSeconds();
      if (seconds < 10) seconds = '0' + seconds;
      clock.children[2].innerHTML = seconds;
    }

    function clockStart() {
      timerId = setInterval(update, 1000);
      update(); // <--  马上开始，不要等 1 秒后直到 setInterval 开始后才开始
    }

    function clockStop() {
      clearInterval(timerId);
    }

    clockStart();
  </script>

  <!-- 单击此按钮调用 clockStart() -->
  <input type="button" onclick="clockStart()" value="Start">

  <!-- 单击此按钮调用 clockStop() -->
  <input type="button" onclick="clockStop()" value="Stop">

</body>
</html>
